<template>
  <div class="">
    <my-header :showBack="true" :title="$t('lang.setting')"></my-header>
    <div>
      <div class="userimg">
        <div class="userimg_left" >
          <img :src="UserImg" alt="" srcset="">
          <div class="username">
            <p class="h3">{{userInfo.customerNumber}}</p>
            <p>{{$t('lang.Trname')}}：{{userInfo.trueName}}</p>
          </div>
        </div>
        <div>
            <!-- <i class="iconfont icon-arrow-right"></i> -->
        </div>
      </div>
      <van-cell-group class="cell_list">
        <!-- <van-cell title="修改个人信息"  :to="'/modifyMsg'" is-link /> -->
        <van-cell :title="$t('lang.sysInfo')" :to="'/UpdataInfo'" is-link />
        <!-- <van-cell title="联系信息" :to="'/ContactInfo'" is-link /> -->
        <van-cell :title="$t('lang.modifyLoginPass')"  :to="'/modifyPwd/'+true" is-link />
        <van-cell :title="$t('lang.modifySecurityPass')" :to="'/modifyPwd/'+false" is-link />
        <van-cell :title="$t('lang.SWlanguage')"  @click="ShowSetLangProp" is-link />
      </van-cell-group>
      <div class="footer_btn">
        <van-button type="primary" size="large" @click="showExitPopup">{{$t('lang.Logout')}}</van-button>
      </div>
      <van-popup v-model="exitPopup" position="bottom" class="exit_popup" @click-overlay="goBack">
        <div class="exit_popup_box">
          <div>
            <span>{{$t('lang.ConfirmLogout')}}</span>
            <span @click="exit">{{$t('lang.Logout')}}</span>
          </div>
          <span @click="exitPopup=false;">{{$t('lang.cancel')}}</span>
        </div>
      </van-popup>
      <!-- 切换语言 -->
      <van-popup v-model="setLangProp"  position="" class="lang_popup">
        <div class="lang_popup_box">
          <p>{{$t("lang.SWMyTip")}}</p>
          <div class="langprop_flex">
            <span @click="setLangProp=false;">{{$t("lang.cancel")}}</span>
            <span @click="ChangeLang">{{$t("lang.confirm")}}</span> 
          </div>
          
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import {Toast} from "vant";
import header from "@/components/header";
export default {
  name:"setting",
  components: {
    "my-header": header
  },
  data(){
    return{
      exitPopup:false,
      UserImg:"",
      userInfo:{},
      setLangProp:false,
      locale:"",
      lang:"",
    }
  },
  created() {
    if (this.$route.fullPath.indexOf("?") != -1) {
      this.goBack();
    }
  },
  watch: {
    $route(val, oldval) {
      if (oldval.fullPath.indexOf("?") != -1) {
        if (this.exitPopup) {
          this.exitPopup = false;
        }
      }
    }
  },
  mounted(){
    this.getUserInfo();
    this.locale=localStorage.getItem('lang');//获取本地的语言
  },
  methods:{
    getUserInfo() {
      // 个人信息
      this.$ajax(this.$api.getMyInfo).then(res => {
        if (res.code === 0 && res.msg) {
          this.userInfo=res.msg;
          // localStorage.setItem("userInfo", JSON.stringify(res.msg));
          this.UserImg=res.msg.customerHead;
        }
      });
    },
    showExitPopup() {
      if (window.location.href.indexOf("?exitPopup") == -1) {
        window.location.href = window.location.href + "?exitPopup";
      }
      this.exitPopup = true;
    },
    exit() {
      localStorage.setItem("token", "");
      this.$router.replace("/login");
    },
    // 切换语言
    ShowSetLangProp(){
      this.setLangProp = true;
    },
    ChangeLang(){
      console.log(this.locale);
      if(this.locale=='zh_CN'){
          this.lang='English';
          this.locale='en_US';
      }else{
        this.lang='中文';
        this.locale='zh_CN';
      }
      this.setLangProp = false;
      this.$cookies.set('lng', this.locale=='zh_CN'?'0':'1', 1);
      localStorage.setItem("lang",this.locale);
      window.location.reload();//进行刷新改变cookie里的值
    }
  }

}
</script>
<style lang="less" scoped>
.userimg{
  display: flex;justify-content:space-between; align-items:center ;box-sizing: border-box;padding: 12px;
    i{color: #999;}
  }
.userimg_left{
  display: flex;align-items:center ;
  img{width: 50px;height: 50px;background: #eeeeee;border-radius: 50%;margin-right: 10px;}
}
.noStyleBtn{
  background:#fff;
  border:none !important;
  z-index:1;
  color:#26a2ff;
  height:2.5rem;
  margin-left:0.5rem;
  margin-right:0;
}

.distpicker-address-wrapper select{
  width:32%;
  font-size:0.8rem;
}
.city_details{
  width:100%;
  height:2rem;
}
.exit_popup {
  width: 90%;
  margin-bottom: 10px;
}

.exit_popup_box {
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
}
.exit_popup_box > div {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  font-size: 16px;
}
.exit_popup_box > span {
  display: block;
  background: #fff;
  border-radius: 5px;
  margin-top: 10px;
  color: #0279fc;
  font-weight: 550;
  padding: 15px 0;
}
.exit_popup_box > div span {
  padding: 15px 0;
  display: block;
}
.exit_popup_box > div span:first-child {
  font-size: 12px;
  color: #8f8f8f;
}
.exit_popup_box > div span:last-child {
  color: #f44;
  font-weight: 550;
}
.username{
  .h3{color: #666666;font-size: 18px;};
  p{color: #999999;padding-top: 5px;}
}
.cell_list{
  .van-cell{color: #666666;}
}
// 语言切换
.lang_popup{
  width:90%;border-radius:5px; padding-top:20px;
  .lang_popup_box{ background-color: rgba(0,0,0,.7); text-align: center;  }
  p{background: #ffffff;padding-top: 10px;}
  .lang_popup_box>.langprop_flex{ 
     background:#fff; overflow: hidden; font-size:16px;display: flex;justify-content: space-between;padding: 20px 0;
    span{ padding:15px 0; display: block;flex:1;text-align: center; }
    span:first-child{ font-size:12px;  color:#8F8F8F; }
    span:last-child{  font-weight: 550;color:#FE392F; }
  }
  .lang_popup_box>span{ display: block; background:#fff; border-radius:5px;  margin-top:10px; color:#0279FC;  font-weight: 550;  padding:15px 0;  }
}
</style>
